<template>
  <div class="t-rate">
    <span class="t-rate__item" v-for="i in maxLevel" style="cursor : pointer;" @mouseleave="recoverLevel" @mousemove="switchLevel(i)" @click="setLevel(i)">
      <i v-if="useIcon" class="t-rate__item__icon" :style="{color: styles[i - 1]}" :class="classes[i - 1]"></i>
      <img v-if="usePic" class="t-rate__item__pic" :src="sources[i-1]"></img>
    </span>
    <span class="t-rate__text">{{ texts[currentLevel-1] }}</span>
  </div>
</template>

<script>
  import flowerPot from '@/assets/rate/flower-pot.svg';
  import singleFlower from '@/assets/rate/single-flower.svg';
  import tripleFlower from '@/assets/rate/triple-flower.svg';
  import tomato from '@/assets/rate/tomato.svg';

  export default {
    name: 't-rate',
    data() {
      return {
        classMap: {
          normalIcon: this.normalIcon,
          lowIcon: this.icons[0],
          mediumIcon: this.icons[1],
          highIcon: this.icons[2],
        },
        colorMap: {
          normalColor: this.normalColor,
          lowColor: this.colors[0],
          mediumColor: this.colors[1],
          highColor: this.colors[2],
        },
        picMap: {
          normalPic: flowerPot,
          lowPic: singleFlower,
          mediumPic: tripleFlower,
          highPic: tomato,
        },
        currentLevel: this.level,
        hoverLevel: -1,
      };
    },
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      useTomatoPic: {
        type: Boolean,
        default: true,
      },
      level: {
        type: Number,
        default: 1,
      },
      lowThreshold: {
        type: Number,
        default: 2,
      },
      highThreshold: {
        type: Number,
        default: 5,
      },
      maxLevel: {
        type: Number,
        default: 5,
      },
      usePic: [String, Boolean],
      useIcon: [String, Boolean],
      normalIcon: {
        type: String,
        default: 'el-icon-star-off',
      },
      icons: {
        type: Array,
        default: () => {
          return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
        },
      },
      normalColor: {
        type: String,
        default: '#C6D1DE',
      },
      colors: {
        type: Array,
        default: () => {
          return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
        },
      },
      texts: {
        type: Array,
        default: () => {
          return ['一星', '二星', '三星', '四星', '五星', '待评估'];
        },
      },
    },
    computed: {
      classes() {
        const threshold = this.currentLevel;
        const classes = [];
        let i = 0;
        for (; i < threshold; i += 1) {
          classes.push(this.getIconByLevel(this.iconMap, i));
        }
        for (; i < this.maxLevel; i += 1) {
          classes.push(this.defaultIcon);
        }
        return classes;
      },
      styles() {
        const threshold = this.currentLevel;
        const styles = [];
        let i = 0;
        for (; i < threshold; i += 1) {
          styles.push(this.getColorByLevel(this.colorMap, i));
        }
        for (; i < this.maxLevel; i += 1) {
          styles.push(this.defaultColor);
        }
        return styles;
      },
      sources() {
        const threshold = this.currentLevel;
        const sources = [];
        let i = 0;
        for (; i < threshold; i += 1) {
          sources.push(this.getPicByLevel(this.picMap, this.currentLevel));
        }
        for (; i < this.maxLevel; i += 1) {
          sources.push(this.picMap.normalPic);
        }
        return sources;
      },
    },
    watch: {
      level(val) {
        this.currentLevel = val;
        this.$emit('change', val);
      },
    },
    methods: {
      getColorByLevel(map, level) {
        if (level <= this.lowThreshold) {
          return map.lowColor;
        } else if (level >= this.highThreshold) {
          return map.highColor;
        }
        return map.mediumColor;
      },
      getIconByLevel(map, level) {
        if (level <= this.lowThreshold) {
          return map.lowIcon;
        } else if (level >= this.highThreshold) {
          return map.highIcon;
        }
        return map.mediumIcon;
      },
      getPicByLevel(map, level) {
        if (this.useTomatoPic) return map.highPic;
        if (level <= this.lowThreshold) {
          return map.lowPic;
        } else if (level >= this.highThreshold) {
          return map.highPic;
        }
        return map.mediumPic;
      },
      switchLevel(level) {
        if (this.disabled === true) {
          return;
        }
        this.currentLevel = level;
      },
      recoverLevel() {
        this.currentLevel = this.level;
      },
      setLevel(level) {
        this.$emit('select', level);
      },
    },
  };
</script>